<template>
    <div class="xzcs-pc-vip-center">
        <div class="xzcs-pc-vip-center-banner">
            <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/vipcenter-banner.png" alt="banner" />
        </div>

        <div v-show="sbShow" class="fudong-sb">
            <div class="fudong-sb1">权益对比</div>
            <div class="fudong-sb2">
                <img src="~/assets/images/vipcenter/table-vip-iovn-1.png" alt="vip" />
                普通会员
            </div>
            <div v-for="(item, index) in vipList" :key="index" class="fudong-sb6" :class="'fudong-sb' + item.id">
                <img v-show="item.id == 6" src="~/assets/images/vipcenter/table-vip-iovn-2.png" alt="vip" />
                <img v-show="item.id == 8" src="~/assets/images/vipcenter/table-vip-iovn-3.png" alt="vip" />
                <img v-show="item.id == 9" src="~/assets/images/vipcenter/table-vip-iovn-4.png" alt="vip" />
                全站通会员
                <span>（{{ getDay(item.day) }}）</span>
                <div @click="govip">开通</div>
            </div>
            <!-- <div class="fudong-sb8">
                <img
                    src="~/assets/images/vipcenter/table-vip-iovn-3.png"
                    alt="vip"
                />
                全站通会员
                <span>（2年）</span>
                <div @click="govip">开通</div>
            </div> -->
        </div>

        <div class="table">
            <div class="xzcs-pc-vip-center-title">
                <img src="~/assets/images/vipcenter/xzcs-pc-vip-center-title-icon.png" alt="" />
                小竹财税会员权益对比
                <img src="~/assets/images/vipcenter/xzcs-pc-vip-center-title-icon.png" alt=""
                    style="transform: rotate(180deg)" />
            </div>
            <div class="table-top">
                <div class="table-top-item item1">权益对比</div>
                <div class="table-top-item item2">
                    <img src="~/assets/images/vipcenter/table-vip-iovn-1.png" alt="vip" />
                    普通会员
                </div>
                <div v-for="(item, index) in vipList" :key="index" class="table-top-item item6"
                    :class="'item' + item.id">
                    <div class="table-top-item-text1">
                        <img v-show="item.id == 6" src="~/assets/images/vipcenter/table-vip-iovn-2.png" alt="vip" />
                        <img v-show="item.id == 8" src="~/assets/images/vipcenter/table-vip-iovn-3.png" alt="vip" />
                        <img v-show="item.id == 10" src="~/assets/images/vipcenter/table-vip-iovn-4.png" alt="vip" />
                        全站通会员
                        <span>（{{ getDay(item.day) }}）</span>
                    </div>
                    <div class="table-top-item-text2">
                        ￥{{ item.discount_price }}
                        <span>￥{{ item.face_value }}</span>
                    </div>
                    <div class="table-top-item-button" @click="govip(index)">
                        立即开通
                    </div>
                </div>
                <!-- <div class="table-top-item item8">
                    <div class="table-top-item-text1">
                        <img
                            src="~/assets/images/vipcenter/table-vip-iovn-3.png"
                            alt="vip"
                        />
                        全站通会员
                        <span>（1天）</span>
                    </div>
                    <div class="table-top-item-text2">
                        ￥598
                        <span>￥2560</span>
                    </div>
                    <div class="table-top-item-button" @click="govip(1)">
                        立即开通
                    </div>
                </div> -->
            </div>
            <div v-for="(item, index) in tableList" :key="index" class="table-column">
                <div class="column1" v-html="item.column1"></div>
                <div class="column2">
                    <div v-if="!item.column2" class="null"></div>
                    {{ item.column2 }}
                </div>
                <div class="column5">
                    <img v-show="!item.column5" src="~/assets/images/vipcenter/Artboard8_3.png" alt="勾" class="dui" />
                    <div v-show="item.column5" class="null"></div>
                </div>
                <div class="column3">
                    <img v-show="!item.column3" src="~/assets/images/vipcenter/Artboard8_2.png" alt="勾" class="dui" />
                    <div v-show="item.column3" class="null"></div>
                </div>
                <div class="column4">
                    <img v-show="!item.column4" src="~/assets/images/vipcenter/Artboard8.png" alt="勾" class="dui" />
                    <div v-show="item.column4" class="null"></div>
                </div>
            </div>
            <div class="xzcs-pc-vip-center-title">
                <img src="~/assets/images/vipcenter/xzcs-pc-vip-center-title-icon.png" alt="" />
                权益说明
                <img src="~/assets/images/vipcenter/xzcs-pc-vip-center-title-icon.png" alt=""
                    style="transform: rotate(180deg)" />
            </div>
            <div class="qy-img4">
                <div class="qy-title">
                    <span>权益一：</span>
                    100+财税专家 —行业最新政策解读及精准推送
                    <div>解决你找不到、找不全、找不专业、不会运用的问题。</div>
                </div>
                <div class="qy-al">案例</div>
                <div class="img-list">
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.1.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.1.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.2.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.2.jpg',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.3.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.3.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.4.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%80/1.4.png',
                        ]"></el-image>
                </div>
            </div>
            <div class="qy-img4">
                <div class="qy-title">
                    <span>权益二：</span>
                    70+被财税人忽略的职场课
                    <div>
                        你是不是认为专业提升了收入就会提升，其实你更应该关注被财税人忽略的职场课。
                    </div>
                </div>
                <div class="qy-al">案例</div>
                <div class="img-list">
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/1.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/1.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/2.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/2.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/3.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/3.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/4.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%8C/4.jpg',
                        ]"></el-image>
                </div>
            </div>
            <div class="qy-img4">
                <div class="qy-title">
                    <span>权益三：</span>
                    18W+税收法规及模块库
                </div>
                <div class="qy-al">案例</div>
                <div class="img-list">
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.1.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.1.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.2.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.2.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.3.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.3.png',
                        ]"></el-image>
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.4.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%B8%89/3.4.png',
                        ]"></el-image>
                </div>
            </div>
            <div class="qy-img4">
                <div class="qy-title">
                    <span>权益四：</span>
                    1000＋全国工商企服服务商
                    <div>从此可以一站式办理全国各地工商财税业务。</div>
                </div>
                <div class="qy-al">案例</div>
                <div class="img-list2">
                    <el-image class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%9B%9B/%E5%9C%B0%E5%9B%BE.png"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%9B%9B/%E5%9C%B0%E5%9B%BE.png',
                        ]"></el-image>
                </div>
            </div>
            <div class="qy-img4">
                <div class="qy-title">
                    <span>权益五：</span>
                    稽查风控—税务风险检测
                    <div>
                        企业就像人一样，一年要有一次全面体检，然后让专家团帮你解读。
                    </div>
                </div>
                <div class="qy-al">案例</div>
                <div class="img-list">
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/1.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/1.jpg',
                        ]"></el-image>
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/2.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/2.jpg',
                        ]"></el-image>
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/3.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/3.jpg',
                        ]"></el-image>
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/4.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E4%BA%94/4.jpg',
                        ]"></el-image>
                </div>
            </div>
            <div class="qy-img4">
                <div class="qy-title">
                    <span>权益六：</span>
                    财税AI — 超级算法模型
                    <div>
                        我们为什么要做财税AI？因为我们觉得财税人一定要有自己的专属AI。
                    </div>
                </div>
                <div class="qy-al">案例</div>
                <div class="img-list">
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/1.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/1.jpg',
                        ]"></el-image>
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/2.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/2.jpg',
                        ]"></el-image>
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/3.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/3.jpg',
                        ]"></el-image>
                    <el-image style="height: 380px" class="img"
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/4.jpg"
                        fit="cover" lazy :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/viponly/%E6%9D%83%E7%9B%8A%E5%85%AD/4.jpg',
                        ]"></el-image>
                </div>
            </div>
        </div>

        <no-ssr>
            <div v-show="userInfo && userInfo.is_gpt_vip == 0" class="bottom-img" @click="govip">
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzcs-pc-vip-center-bottom-img.png"
                    alt="vip" />
            </div>
        </no-ssr>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { getComboList } from "@/assets/api/GPT";
export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            tableList: [
                {
                    column1:
                        "100+财税专家团<span>最新政策解读及精准推送</span>",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "财税人专属AI",
                    column2: "限免",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "会计人必学的自身风险规避课程",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "4W＋财税问题库",
                    column2: "限免",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "5W＋模板库",
                    column2: "限免",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "会计影响力之如何搞定销售（课)",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "会计影响力之如何搞定老板(课)",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "会计小白如何度过职场尴尬期私教课",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "10W＋税收法规库",
                    column2: "限免",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "6W＋会计法规库",
                    column2: "限免",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "会计如何快速晋升精品课",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "税务筹划实战运用课",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1: "发票整理助手",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1:
                        "税务风险检测<span>在S局找到你之前，先把问题解决了</span>",
                    column2: "",
                    column3: "",
                    column4: "-",
                    column5: "",
                },
                {
                    column1:
                        "财税专家真人线上1V1问答<span>冠军团队、更专业、更放心</span>",
                    column2: "",
                    column3: "",
                    column4: "",
                    column5: "",
                },
                {
                    column1:
                        "1000＋全国工商企服服务商<span>全站通会员下单可享95折优惠，再送一个月会员</span>",
                    column2: "",
                    column3: "",
                    column4: "",
                },
                {
                    column1: "财税资讯快报",
                    column2: "限免",
                    column3: "",
                    column4: "",
                    column5: "",
                },
            ],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/vipcenter",
                images: [""],
                title: "会员中心",
                description: "",
                pubDate: "2024-09-05",
                upDate: "2024-09-05",
            },
        };

        return data;
    },
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld),
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "会员中心-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: "",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            sbShow: false,
            vipList: [],
            getDay: function (day) {
                switch (day) {
                    case 1:
                        return "1天";
                    case 30:
                        return "1月";
                    case 90:
                        return "1季";
                    case 180:
                        return "半年";
                    case 365:
                        return "1年";
                    case 730:
                        return "2年";
                }
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() { },
    mounted() {
        this.set_logo_color("#ffffff");
        this.set_nav_color("#ffffff");
        this.set_back_color("#ffffff");
        this.$nextTick(() => {
            window.addEventListener("scroll", this.checkScrollSb);
        });
        this.getVipList();
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.checkScrollSb);
    },
    methods: {
        ...mapMutations("common", [
            "set_logo_color",
            "set_nav_color",
            "set_back_color",
            "set_payVipShow",
        ]),

        // 切换会员类型
        async getVipList() {
            const res = await getComboList({});
            if (res.code == 1) {
                this.vipList = [
                    res.data[2],
                    res.data[0], res.data[1]];
            }
        },

        checkScrollSb() {
            const scrollHeight = window.scrollY;
            if (scrollHeight > 726 && scrollHeight < 1937) {
                this.sbShow = true;
            } else if (scrollHeight > 1937 || scrollHeight < 726) {
                this.sbShow = false;
            }
        },

        govip(i = 0) {
            if (this.userInfo) {
                if (i == 2) {
                    localStorage.setItem("payvipindex", "1");
                }else if (i == 0) {
                    localStorage.setItem("payvipindex", "2");
                }
                this.set_payVipShow({ show: true, index: 1 });
            } else {
                this.$router.push({
                    path: "/login",
                    query: {
                        url: "/vipcenter",
                    },
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.xzcs-pc-vip-center {
    background: #f9f9f9;
}

.xzcs-pc-vip-center-banner {
    img {
        width: 100%;
        height: 561px;
        object-fit: cover;
    }
}

.xzcs-pc-vip-center-title {
    font-weight: 600;
    font-size: 32px;
    color: #3d2909;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 23px;
    padding-top: 26px;

    img {
        width: 30px;
        height: 25px;
        margin: 0 11px;
    }
}

.table {
    width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
}

.table-top {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .table-top-item-text2 {
        text-align: right;
    }

    .table-top-item {
        width: 240px;
        height: 145px;
        padding: 21px 12px 12px 25px;
    }

    .item1 {
        background: #ebebeb;
        font-weight: 500;
        font-size: 24px;
        color: #333333;
    }

    .item2 {
        background: #cfcfcf;
        display: flex;
        align-items: flex-start;
        font-weight: 500;
        font-size: 24px;
        color: #333333;
        line-height: 29px;

        img {
            width: 33px;
            height: 30px;
            margin-right: 3px;
        }
    }

    .item6 {
        background: linear-gradient(270deg, #f4c27e 2%, #ffe9ca 97%);

        .table-top-item-text1 {
            color: #773a0f;

            span {
                color: #773a0f;
            }
        }

        .table-top-item-text2 {
            color: #773a0f;

            span {
                color: #773a0f;
            }
        }

        .table-top-item-button {
            background: linear-gradient(270deg, #d3a557 0%, #f0cc8b 92%);
            color: #773a0f;
        }
    }

    .item8 {
        background: linear-gradient(270deg, #9da6e6 0%, #d4d6e7 100%);

        .table-top-item-text1 {
            color: #262e62;

            span {
                color: #262e62;
            }
        }

        .table-top-item-text2 {
            color: #262e62;

            span {
                color: #262e62;
            }
        }

        .table-top-item-button {
            background: linear-gradient(270deg, #5964bb 0%, #404a8c 99%);
            color: #ffffff;
        }
    }

    .item10 {
        background: linear-gradient(270deg, #54A5F6 0%, #CCE6FF 100%);

        .table-top-item-text1 {
            color: #164F89;

            span {
                color: #164F89;
            }
        }

        .table-top-item-text2 {
            color: #164F89;

            span {
                color: #164F89;
            }
        }

        .table-top-item-button {
            background: linear-gradient(270deg, #2982DC 0%, #6CB2F8 99%);
            color: #ffffff;
        }
    }

    .item6,
    .item8,
    .item10 {
        .table-top-item-text1 {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 17px;

            span {
                padding-left: 4px;
                font-weight: 400;
                font-size: 15px;
            }

            img {
                width: 33px;
                height: 30px;
                margin-right: 3px;
            }
        }

        .table-top-item-text2 {
            margin-top: 10px;
            font-weight: 400;
            font-size: 15px;
            padding-right: 23px;

            span {
                padding-left: 6px;
                font-weight: 400;
                font-size: 14px;
                text-decoration-line: line-through;
            }
        }

        .table-top-item-button {
            width: 186px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 5px;
            margin-left: 4px;
            margin-top: 12px;
            font-weight: 500;
            font-size: 14px;
            user-select: none;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }

            &:active {
                opacity: 0.9;
            }
        }
    }
}

.table-column {
    display: flex;
    align-items: center;
    margin-bottom: 2px;

    >div {
        // width: 240px;
        width: 240px;
        height: 70px;
    }

    .null {
        width: 20px;
        height: 7px;
        background: #cfcfcf;
    }

    .dui {
        width: 28px;
        height: 29px;
    }

    .column1 {
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        line-height: 1.5;
        padding-left: 33px;
        background: #f7f7f7;
        white-space: pre-wrap;
        display: flex;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;

        &::v-deep span {
            color: #773a0f;
            font-size: 12px;
            display: block;
            padding-top: 2px;
            width: 100%;
        }
    }

    .column2 {
        background: #f3f3f3;
        font-weight: 400;
        font-size: 20px;
        color: #333333;
    }

    .column3 {
        background: #fdf3e6;
    }

    .column4 {
        background: #ecf2fe;
    }

    .column5 {
        background-color: #E8F4FF;
    }

    .column2,
    .column3,
    .column4,
    .column5 {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.qy-img4 {
    padding-bottom: 35px;
    padding-top: 15px;

    .qy-title {
        font-weight: 500;
        font-size: 22px;
        color: #333333;
        padding-bottom: 36px;

        span {
            color: #572a0a;
        }

        div {
            color: #773a0f;
            font-size: 16px;
            padding-top: 4px;
            padding-left: 96px;
        }
    }

    .qy-al {
        font-weight: 400;
        font-size: 20px;
        color: #333333;
        margin: 23px 0 36px;
        padding-left: 27px;
        display: none;
    }

    .img-list {
        // padding-top: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
            width: 269px;
            height: 475px;
            object-fit: cover;
            border-radius: 10px;
        }

        .img {
            width: 269px;
            height: 475px;
            border-radius: 10px;
        }
    }

    .img-list2 {
        img {
            width: 1200px;
            height: 399px;
            object-fit: cover;
            border-radius: 10px;
        }

        .img {
            width: 1200px;
            height: 399px;
            border-radius: 10px;
        }
    }
}

.bottom-img {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 500;
    width: 100%;

    img {
        width: 100%;
        height: 85px;
        object-fit: cover;
        display: block;
    }
}

.fudong-sb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 80px;
    left: 0;

    >div {
        width: 240px;
        height: 80px;
        display: flex;
        align-items: center;

        img {
            width: 26px;
            height: 23px;
            display: block;
        }
    }

    .fudong-sb1 {
        background: #ebebeb;
        padding-left: 24px;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
    }

    .fudong-sb2 {
        background: #cfcfcf;
        padding-left: 10px;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
    }

    .fudong-sb6 {
        background: linear-gradient(270deg, #f4c27e 2%, #ffe9ca 97%);
        font-weight: 500;
        font-size: 16px;
        color: #773a0f;
        padding-left: 14px;

        span {
            font-weight: 400;
            font-size: 12px;
            color: #773a0f;
        }

        div {
            width: 65px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: linear-gradient(270deg, #d3a557 0%, #dbad5b 100%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 14px;
            color: #773a0f;
            cursor: pointer;
            user-select: none;
        }
    }

    .fudong-sb8 {
        background: linear-gradient(270deg, #9da6e6 0%, #d4d6e7 100%);
        font-weight: 500;
        font-size: 16px;
        color: #262e62;
        padding-left: 14px;

        span {
            font-weight: 400;
            font-size: 12px;
            color: #262e62;
        }

        div {
            width: 65px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: linear-gradient(270deg, #5964bb 0%, #404a8c 99%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            cursor: pointer;
            user-select: none;
        }
    }

    .fudong-sb10 {
        background: linear-gradient(270deg, #54A5F6 0%, #CCE6FF 100%);
        font-weight: 500;
        font-size: 16px;
        color: #164F89;
        padding-left: 14px;

        span {
            font-weight: 400;
            font-size: 12px;
            color: #164F89;
        }

        div {
            width: 65px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: linear-gradient(270deg, #2982DC 0%, #6CB2F8 99%);
            border-radius: 5px;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            cursor: pointer;
            user-select: none;
        }
    }
}
</style>
